<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String filePath = basePath+"/view/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> OFCloud </title>
    <link href="view/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="view/bac/css/font-awesome.min.css" rel="stylesheet">
    <link href="view/bac/css/animate.css" rel="stylesheet">
	<link href="view/bac/css/style.css" rel="stylesheet">
   	
	<link rel="stylesheet" type="text/css" href="view/rec/css/base.css">
	<link rel="stylesheet" type="text/css" href="view/rec/css/index.css">

	
	 <link href="view/rec/gallery/css/mocha.min.css" rel="stylesheet">
	 <link href="view/rec/gallery/css/test.css" rel="stylesheet">
	 <link href="view/rec/gallery/css/index1.css" rel="stylesheet">
	
	
	
  	<script src="view/plugins/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="view/rec/js/jQueryColor.js"></script>
	<!-- 这个插件是瀑布流主插件函数必须 -->
	<script type="text/javascript" src="view/rec/js/jquery.masonry.min.js"></script>
	<!-- 这个插件只是为了扩展jquery的animate函数动态效果可有可无 -->
	<script type="text/javascript" src="view/rec/js/jQeasing.js"></script>
	<script src="view/bac/js/ofc-pub.js"></script>

	<script type="text/javascript">
	/*
		抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
		masonry还有很多参数我这里注解了常用的参数
	 */
		$(function(){
				/*瀑布流开始*/
				var container = $('.waterfull ul');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/320);
						tmpWid=column*320;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 320,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				/*模拟从后台获取到的数据*/
				var sqlJson="";
				/*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
				$(window).scroll(function(){
					if(!loading.data("on")) return;
					// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
					var itemNum=$('#waterfull').find('.item').length;
					var itemArr=[];
					itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					var maxTop=Math.max.apply(null,itemArr);
					if(maxTop<$(window).height()+$(document).scrollTop()){
						//加载更多数据
						loading.data("on",false).fadeIn(80);
						
						sqlJson = getGalleryData();
						
						(function(sqlJson){
							/*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
			        		console.log(sqlJson.length);
							if(sqlJson.length==0){
								loading.text('就有这么多了！');
							}else{
								/* var html = "";
					        	for(var i in sqlJson){
									var url = sqlJson[i].req_url;
									html+="<li class='item'><a href='getGalleryContent?serialId="+sqlJson[i].serial_id+"' target='_blank' class='a-img'><img src='"+url.split("@")[0]+"'></a>";
									html+="<h2 class='li-title'>"+sqlJson[i].blog_title+"</h2>";
									html+="<div class='qianm clearfloat'>";
									html+="<span class='sp1'><b>"+sqlJson[i].click_num+"</b>浏览</span>";
									html+="<span class='sp2'>"+sqlJson[i].click_num+"</span><span class='sp3'>"+sqlJson[i].update_time+"&nbsp;By</span></div></li>";		
								}
								 $(html).find('img').each(function(index){
									loadImage($(this).attr('src'));
								}) 
								
								var $newElems = $(html).css({ opacity: 0}).appendTo(container);
								$newElems.imagesLoaded(function(){
									$newElems.animate({ opacity: 1},80);
									container.masonry( 'appended', $newElems,true);
									loading.data("on",true).fadeOut();
						        }); */
						        loadHtml(sqlJson);
						        loading.data("on",true).fadeOut();
							}
						})(sqlJson);
					}
				});
				
				 loadImage('images/one.jpg');
				/*item hover效果*/
				 var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
				$('#waterfull').on('mouseover','.item',function(){
					var random=Math.floor(Math.random() * 4);
					$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
				});
				$('#waterfull').on('mouseout','.item',function(){
					$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
				}); 
				
				
		})
		function getGalleryData(){
		
			var nextPageNum =$("#pageNum").val();
			var tagName =$("#tagName").val();
			
			nextPageNum = parseInt(nextPageNum)+1;
			
			var par={
    				"page":nextPageNum,
    				"tagNo":'',
    				"tagName":tagName
    				}
    		var result = doPost("getGalleryPage", par);
			var objlist = result.detail.gallery.list;
			$("#pageNum").val(nextPageNum);
			return objlist;
		} 
	
		function loadHtml( sqlJson){
			var container = $('.waterfull ul');
			var html = "";
        	for(var i in sqlJson){
				var url = sqlJson[i].req_url;
				html+="<li class='item'><a href='getGalleryContent?serialId="+sqlJson[i].serial_id+"' target='_blank' class='a-img'><img src='"+url.split("@")[0]+"'></a>";
				html+="<div class='li-title'>"+sqlJson[i].blog_title+"</div>";
				html+="<div class='qianm clearfloat'>";
				html+="<span class='sp1'>>浏览 : <b>"+sqlJson[i].click_num+"</b</span>";
				html+="<span class='sp2'>"+sqlJson[i].click_num+"</span><span class='sp3'>"+sqlJson[i].update_time+"&nbsp;By</span></div></li>";		
			}
			 $(html).find('img').each(function(index){
				loadImage($(this).attr('src'));
			}) 
			
			var $newElems = $(html).css({ opacity: 0}).appendTo(container);
			$newElems.imagesLoaded(function(){
				$newElems.animate({ opacity: 1},80);
				container.masonry( 'appended', $newElems,true);
				
	        });
		}
		function loadImage(url) {
		     var img = new Image(); 
		     //创建一个Image对象，实现图片的预下载
		      img.src = url;
		      if (img.complete) {
		         return img.src;
		      }
		      img.onload = function () {
		       	return img.src;
		      };
		 };
    </script>
    <style type="text/css">
    	nav,div,main{margin:0px ; padding:0px}
    
	.left-menu-toggle .pane {
	    position: relative;
	    margin: 0 0 6px 15px;
	    display: block;
	    width: 26px;
	    height: 3px;
	    border-radius: 1px;
	    background-clip: padding-box;
	    background: #FFFFFF;
	    content: " ";
	    color: #FFFFFF;
	    
	}
	.tag-list li a {
	    padding: 6px 6px;
	    background-color: #FFFFFF;
	}
	
	span{font-size: 10px;}
    </style>
    
</head>
	<body>
	    <nav id="menu" class="menu" style="background-color: #fafafa">
	        <div class="menu-header" style="background-color: #1ab394;height:70px">
	          <div  style="color: #FFFFFF;text-align: center;margin:0 auto;font-size: 20px;font-weight: 600">标签云</div>
	        </div>
	      </a>
	
	      <section class="menu-section">
	      	<div style="margin: 0px 10px 0px 10px ">
	        <ul class="tag-list" style="padding: 0">
	        	<c:forEach items="${tagsList }" var="obj">
		        	<li name="${obj.tagNo}"><a href="selectTags?tagNo=${obj.tagNo}"><i class="fa fa-tag"></i> ${obj.tagName}   <span class="badge badge-primary">${obj.tagNameCount}</span></a> </li>
	        	</c:forEach>
		        
	    	</ul>																			
	      	</div>
	      </section>
	    </nav>
	   <main id="panel" class="panel" style="margin-left:-8px">
	      <div class="panel-header " style=" position: absolute; top:-1px;width:100%;background-color: #1ab394; height:70px;margin:0px;z-index:2000 " ><!--  -->
	        <!-- <button class="btn-hamburger js-slideout-toggle  " ></button> -->
	        <div class="left-menu-toggle " style="margin-top:23px; margin-left:20px">
				<div class="js-slideout-toggle" style="cursor: pointer;">
					<span class="pane"></span>
					<span class="pane"></span>
					<span class="pane"></span>
				</div>
			</div>
	        <!-- <a class="navbar-minimalize minimalize-styl-2 btn btn-primary  " href="#"><i class="fa fa-bars"></i> </a> -->
	      </div>
	      <div class="content">
				<!-- 瀑布流样式开始 -->
				<div class="waterfull clearfloat" id="waterfull" style="margin-top:85px;">
					<ul >
						<c:forEach items="${gallery.list }" var="obj">
							<li class="item">
								<a href="getGalleryContent?serialId=${obj.serial_id }" target="_blank" class="a-img">
									<img src="${obj.blog_content}" alt=""> <!-- ${obj.blog_content} -->
									
								</a>
								<div class="li-title" title="${obj.blog_title}">${obj.blog_title}</div>
								
								<div class="qianm clearfloat">
									<span class="sp1">浏览 :<b>${obj.click_num}</b></span>
									<span class="sp2">${obj.update_user_name}</span>
									<span class="sp3">${obj.update_time} &nbsp;By</span>
								</div>
							</li>
						</c:forEach>
					</ul>
				</div>
				<!-- loading按钮自己通过样式调整 -->
				<div id="imloading" style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
				素材加载中.....
				</div>
				
				
			</div>
	    </main>
		<div id="small-chat">
	        <a class="open-small-chat">
	             <i class="fa fa-arrow-up"></i>
	        </a>
	        
	        <div class="margin-top" style=""></div>
	        <a href="index" class="open-small-chat">
	                <i class="fa fa-home"></i>
	        </a>
	    </div>
		<input type="hidden" id="pageNum" value="1">
		<input type="hidden" id="tagName" value="${tagName}">
		<script src="view/rec/gallery/js/mocha.min.js"></script>
		<script src="view/rec/gallery/js/slideout.js"></script>
    
    <script>
      

      var slideout = new Slideout({
        'panel': document.getElementById('panel'),
        'menu': document.getElementById('menu'),
        'padding': 300,
        'tolerance': 70,
        'easing': 'linear'
      });

      // Toggle button
      document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
        slideout.toggle();
      });
    
      $(function(){
    	  $(".tag-list li").click(function(){
    		  
    		 var tagName =  $(this).attr("name");
    		 $("#tagName").val(tagName); 
    		 $("#pageNum").val("0");
    		 $("#waterfull ").remove("ul");
    		 
    		 /* var sqlJson = getGalleryData();
    		 loadHtml(sqlJson);
    		 */
    		 slideout.toggle(); 
    	  })
    	  $(".open-small-chat").click(function(){
    		  toTop();
    	  })
      })
     
      function toTop(){
        window.scroll(0,0);
      }
      
    </script>
</body>
</html>